<template>
  <div class="easyd-weixin-Box">
    <div class="openHelp" @click="openHelpClick"><i class="fa fa-lightbulb-o fa-lg"></i><span>帮助</span></div>
    <div class="guideActionBox" v-if="isShopGuide">
        <div class="app_guide">
            <div class="app_guide_content app_guide_1_content" v-if="guideData.guide_1">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助小助手：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                  <!-- <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> -->
                  <!-- <span @click="nextGuideClick(++nowGuideIndex)">下一步</span> -->
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>1. 您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_2_content" v-if="guideData.guide_2">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助小助手：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                  <!-- <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> -->
                  <!-- <span @click="nextGuideClick(++nowGuideIndex)">下一步</span> -->
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>1. 您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_3_content" v-if="guideData.guide_3">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助小助手：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                  <!-- <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> -->
                  <!-- <span @click="nextGuideClick(++nowGuideIndex)">下一步</span> -->
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>1. 您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <img class="app_guide_img app_guide_1_img" v-if="guideData.guide_1" src="static/images/jiantou_you_shang.png" />
            <img class="app_guide_img app_guide_2_img" v-if="guideData.guide_2" src="static/images/jiantou_you_shang.png" />
            <img class="app_guide_img app_guide_3_img" v-if="guideData.guide_3" src="static/images/jiantou_you_shang.png" />
            <div class="app_guide_border app_guide_1_border" v-if="guideData.guide_1"></div>
            <div class="app_guide_border app_guide_2_border" v-if="guideData.guide_2"></div>
            <div class="app_guide_border app_guide_3_border" v-if="guideData.guide_3"></div>
          </div>
    </div>
    <transition name="fade" enter-active-class="animated fadeOutUp" leave-active-class="animated fadeOutUp" :duration="200">
      <div class="concernRemindBox" v-if="isConcern">您还没有关注该朋友，
        <span @click="concernClick">请先关注</span>
      </div>
    </transition>
    <div class="shopShowTypeBox">
      <div class="shopShowTypeItem" @click="selectShopType(0)">
        <i class="fa fa-th-list fa-lg" :class="nowSelectedShopType == 0 ? 'selected' : '' "></i>
      </div>
      <div class="shopShowTypeItem" @click="selectShopType(1)">
        <i class="fa fa-th-large fa-lg" :class="nowSelectedShopType == 1 ? 'selected' : '' "></i>
      </div>
    </div>
    
    <div class="shopListBox" :style="{ top : shopListBoxTop + 'px' }">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <transition name="fade" enter-active-class="animated shake" leave-active-class="animated shake" :duration="200">
        <div class="shopCardContent" v-if="nowSelectedShopType == 0">
          <div class="shopCardItem" v-for="item in testData">
            <div class="shopCardItemInfo">
              <div class="shopCardItemImage">
                <img :src="item.img" v-lazy="item.img" v-gallery>
              </div>
              <div class="shopCardItemContent">
                <div class="shopCardItemContentName" @click="showShopDetail">{{item.name}}</div>
                <div class="shopCardItemContentPriceAndBtn">
                  <div class="shopCardItemContentBuyAndLook"><i class="fa fa-shopping-cart fa-lg"></i>100&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-eye fa-lg"></i>100</div>
                  <div class="shopCardItemContentPrice">¥{{item.newPrice}} <span v-if="item.oldPrice > 0">¥{{item.oldPrice}}</span></div>
                  <div class="shopCardItemContentStatus" v-if="item.isPreferential">
                    优惠中
                  </div>
                  
                </div>
              </div>
            </div>
            <!-- <div class="shopCardItemDesc">安徽溜溜果园集团总部位于安徽省芜湖市繁昌县经济开发区，下辖安徽溜溜果园科技占地面积近二十万平方米，市繁昌县经济开发区...</div> -->
            <div class="shopCardItemConcern" @click="concernShopClick">关注商品</div>
          </div>
        </div>
        </transition>
        <transition name="fade" enter-active-class="animated shake" leave-active-class="animated shake" :duration="200">
        <div class="shopListContent" v-if="nowSelectedShopType == 1">
          <div class="shopListItem" v-for="item in testData">
            <div class="shopListItemImage">
              <img :src="item.img" v-lazy="item.img" v-gallery>
            </div>
            <div class="shopListItemName" @click="showShopDetail">{{item.name}}</div>
            <div class="shopListItemPriceAndBtn">
              <div class="shopListItemPrice">¥{{item.newPrice}} <span v-if="item.oldPrice > 0">¥{{item.oldPrice}}</span></div>
              <div class="shopListItemContentStatus" v-if="item.isPreferential">
                优惠中
              </div>
            </div>
            <div class="shopListItemConcern" @click="concernShopClick">关注商品</div>
          </div>
        </div>
        </transition>
        </mt-loadmore>
      </div>
     
    </div>
    
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
 
  data() {
    return {
      previewImage:'',
      guideData : {
        guide_1 : true,
        guide_2 : false
      },
      nowGuideIndex : 0,

      isConcern : true,
      allLoaded : false,
      shopListBoxTop : 90,
      nowSelectedShopType: 0,
      testData : [
        {
          name  : '良品铺子-猪肉脯自然片零食100g休闲零食小吃',
          img   : './static/images/shangpin1.jpg',
          newPrice : '19.9',
          oldPrice : '200',
          isPreferential : true
        },
        {
          name : '良品铺子-芒果干108g*1休闲零食时尚健康',
          img  : './static/images/shangpin2.jpg',
          newPrice : '28.9',
          oldPrice : '',
          isPreferential : false
        },
        {
          name : '良品铺子-牛扎奶芙120g*1休闲零食时尚健康',
          img  : './static/images/shangpin3.jpg',
          newPrice : '30',
          oldPrice : '',
          isPreferential : false
        },
        {
          name : '良品铺子-面筋卷120g麻辣辣条零食怀旧零食辣片袋装',
          img  : './static/images/shangpin4.jpg',
          newPrice : '22',
          oldPrice : '100',
          isPreferential : true
        },
        {
          name : '良品铺子-云南核桃200gx1袋休闲零食小吃',
          img  : './static/images/shangpin5.jpg',
          newPrice : '199.9',
          oldPrice : '',
          isPreferential : false
        },
        {
          name : '良品铺子-脆冬枣35g*1休闲零食时尚健康',
          img  : './static/images/shangpin6.jpg',
          newPrice : '66.9',
          oldPrice : '',
          isPreferential : false
        }
      ]
      // imageDemoUrl : "http://testfileupload.oss-cn-beijing.aliyuncs.com/shangpin1.jpg"
    };
  },
  computed: {
    ...mapState({
      isShowAppGuide : state => state.AppModule.isShowAppGuide,
      isShopGuide    : state => state.ShopIndexModule.isShopGuide
    })
  },
  mounted(){

  },
  methods: {

    ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),

    uploadChange(e) {
      // var fileObj = e.target.files[0];
      // this.$http.Aliyun_uploadImageHttp(fileObj, { dir : '2018' } ,rsUrl => {
      //   this.previewImage = rsUrl;
      // });
      console.log("上传");
      console.log(e);
      this.previewImage = "http://artmofang.oss-cn-beijing.aliyuncs.com/2018/1552025504000-JbmGnT.png";
    },
    cropperImageClick() {
      var that = this;
      this.$cropperImage({
        //裁切完成后回调函数
        cropperImageResult(file) {
          console.log("裁切");
          console.log(file);
          // that.$http.EasyD_uploadImageHttp(file, {}, rs => {
            // that.$http.Aliyun_uploadImageHttp(file, { dir : '/2018' } ,rsUrl => {
            //   that.previewImage = rsUrl;
            // })
          // });
        },
        //要裁切的图片
        imgUrl: that.previewImage
      });
    },

    openHelpClick(){
      this["ShopIndexModule/updateIsShopGuide"](true)
    },

    nextGuideClick(idx){

      this.nowGuideIndex = idx = ( idx >= 3 ? 0 : idx ) == 0 ? 0 : this.nowGuideIndex;
      for(var k in this.guideData){
        this.guideData[k] = false;
      }
      this.guideData['guide_' + (idx + 1)] = true;

    },

    closeGuideClick(){
      this["ShopIndexModule/updateIsShopGuide"](false)
    },
    selectShopType(type) {

      this.$easyUtil.startLoading(this)
      
      setTimeout(()=>{
        this.$easyUtil.endLoading(this);
        this.nowSelectedShopType = type;
      },1000)
    },

    concernClick(){

       this.$easyUtil.confirm(this,'关注提示','您确定要关注该用户吗',()=>{
          this.$easyUtil.startLoading(this,'正在关注...')
          setTimeout(()=>{
            this.$easyUtil.successToast(this,'关注成功');
            setTimeout(()=>{
              // this.isConcern = false;
              // this.shopListBoxTop = 65;
            },3000)
          },500)
       })
    
    },

    showShopDetail(){
      this.$router.push({
        path : '/shopDetail'
      })
    },



    concernShopClick(){
      this.$easyUtil.successToast(this,'成功关注该商品');
    },
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      },2000)
    },
    loadBottom() {
      setTimeout(() => {
        this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded();
      },5000)
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'

.headerImg {
		width: 60px;
		height: 60px;
		float: right;
	}
	
	.headerImg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.app_guide {

   .app_guide_1_content {
      top 110px
   }

  .app_guide_2_content {
      top 160px
   }

   .app_guide_3_content {
      top 360px
   }

    .app_guide_1_img {
        top 52px
        left 220px  
    }

    .app_guide_2_img {
        top 102px
        left 220px  
    }

    .app_guide_3_img {
        top 295px
        left 220px  
    }

    .app_guide_1_border {
      width 80px
      height 40px;
      top 2px
      left 220px
    }

    .app_guide_2_border {
      width 80%
      height 40px
      top 50px
      left 10%
    }

    .app_guide_3_border {
      width 92%
      box-sizing border-box
      left 4%
      height 180px
      top 102px
    }

  }


.shopShowTypeBox {
  width: 100%;
  height: 40px;
  background #fff
  float left
  
  .shopShowTypeItem {
    width: 50%;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
    color: #999;

    i.selected {
      color: orange;
    }
  }
}

.shopListBox {
  
  width: 100%;
  position absolute
  bottom 0px
  overflow auto
  -webkit-overflow-scrolling : touch;

  .shopCardContent {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;

    .shopCardItem {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      position relative
      padding: 10px;
      margin-top: 15px;
      $itemStyle()

      &:last-child {
        margin-bottom 15px  
      }

    }

    .shopCardItemInfo {
      width: 100%;
      height: 100px;
      display: flex;
    }

    .shopCardItemImage {
      width: 110px;
      height: 100px;
      margin-right: 10px;

      img {
        $imgStyle()
      }
    }

    .shopCardItemContent {
      flex: 1;
      position: relative;
    }

    .shopCardItemContentName {
      width: 100%;
      height: 40px;
      font-weight: 500;
      text-align: justify;
    }

    .shopCardItemContentPriceAndBtn {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0px;

      .shopCardItemContentStatus {
        position absolute
        bottom 0px
        right 0px
        width 50px
        color red
        font-weight 500

      }

      .shopCardItemContentBuyAndLook {
        font-size 12px
        color #999
        font-weight 500
        height 20px
        margin-top -15px

        i {
          font-size 14px
          color #ccc
          position relative
          top -2px
          margin-right 5px
        }  
      }
      
    }

    .shopCardItemContentPrice {
      width: auto;
      height: 30px;
      float: left;
      letter-spacing: 1px;
      font-weight: 500;
      font-size: 18px;
      line-height: 40px;
      color: orange;

      span {
        font-size 12px
        text-decoration line-through
        float right
        color #999
        margin-top 2px
        margin-left 5px
      }
    }

    .shopCardItemContentBtn {
      width: 70px;
      height: 25px;
      float: right;
      border-radius: 5px;
      text-align: center;
      line-height: 25px;
      margin-top: 8px;
      color: #666;
    }

    .shopCardItemDesc {
      width: 100%;
      height: auto;
      line-height: 22px;
      font-size: 12px;
      margin-top: 10px;
      text-align: justify;
    }

    .shopCardItemConcern {
      width: 100%;
      height: 45px;
      background: #FDDE6E;
      line-height: 45px;
      text-align: center;
      margin-top: 10px;
      color: #666;
      font-weight: 500;
      letter-spacing: 1px;
      border-radius: 5px;
    }
  }

  .shopListContent {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;

    .shopListItem {
      width: 48%;
      height: 275px;
      padding-left: 10px;
      box-sizing: border-box;
      padding-top: 10px;
      padding-right: 10px;
      margin-top 15px
      $itemStyle()

      &:last-child {
        margin-bottom 15px  
      }
    }

    .shopListItemImage {
      width: 100%;
      height: 120px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        object-fit: cover;
        border 1px solid #ddd
      }
    }

    .shopListItemName {
      width: 100%;
      display:-webkit-box; 
      -webkit-box-orient:vertical; 
      -webkit-line-clamp:2; 
      overflow hidden
      height: 40px;
      font-weight: 500;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .shopListItemPriceAndBtn {
      width: 100%;
      height: 30px;
      position relative

      .shopListItemContentStatus {
        float right
        font-size 12px 
        position absolute
        bottom 5px
        right 0px
        color red
        font-weight 500
      }
    }

    .shopListItemPrice {
      width: auto;
      height: 30px;
      float: left;
      letter-spacing: 1px;
      font-weight: 500;
      font-size: 18px;
      line-height: 30px;
      color: orange;

      span {
        font-size 12px
        text-decoration line-through
        float right
        color #999
        margin-top 2px
        margin-left 5px
      }
    }

    .shopListItemBtn {
      width: 70px;
      height: 25px;
      background: orange;
      float: right;
      border-radius: 5px;
      text-align: center;
      line-height: 25px;
      margin-top: 2px;
      color: #fff;
      font-size: 12px;
    }

    .shopListItemConcern {
      width: 100%;
      margin-top: 5px;
      $actionBtnStyle()
    }
  }
}
</style>
